<template>
  <view class="searchPage">
    <view class="search">
      <input type="text" v-model="key" ref="searchInput" class="searchFont" placeholder="输入关键词或创作者码">
      <button class="searchBtn" @tap="search(key)">搜索</button>
    </view>
    <template v-if="author">
      <text class="title">
        创作者
      </text>
      <view class="author"  @tap="navigateTo(`/pages/author/detail/index?id=${author.id}`)">
        <view class="left">
          <image class="avatarImg" :src="author.avatar" />
          <view class="info">
            <text class="username">{{ author.pseudonym }}</text>
            <text class="description">{{ author.description }}</text>
            <text class="num">共发布{{ author.imgNum }}张图片，{{ author.groupNum }}个集合。</text>
          </view>
        </view>
        <image class="rightIcon" src="../../assets/icon/right.png"/>
      </view>
    </template>
    <template v-if="groupList.length > 0">
      <text class="title">
        相关表情包
      </text>
      <view class="groupItem" v-for="item in groupList" @tap="goGroup(item.group.id)">
        <view class="title">
          <view class="title_font">
            {{ item.group.title }}
          </view>
          <view class="title_link">
            查看全部({{ item.num }}张)
          </view>
        </view>
        <view class="blockList">
          <image v-for="subItem in item.list" :src="subItem.hdPath + '?x-oss-process=image/auto-orient,1/quality,q_20/format,webp'" mode="aspectFill" />
        </view>
        <view class="tagList">
          <view class="tagItem" v-for="item in item.group.tag.split(',')">{{ item }}</view>
        </view>
      </view>
    </template>
    <view class="empty" v-if="empty">
      <image src="../../assets/icon/empty.png"></image>
      无结果
    </view>
    <view class="hotSearch block" v-if="showHot">
      <view class="block_title">
        <view class="title_font">
          热门搜索
        </view>
      </view>
      <view class="hotSearchList">
        <view class="item" v-for="item in hotSearch" @tap="quickSearch(item.title)">{{ item.title }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import './index.sass'
import {get} from "../../util/request";
import Taro from "@tarojs/taro";
import {reactive, ref, watch} from "vue";

var hotSearch = reactive([])
var hotLink = reactive([])
var groupList = reactive([])
var author = ref(null)
var key = ref('')
var showHot = ref(false)
var empty = reactive(false)

watch(key, (val) => {
  if(val.length == 0) {
    groupList = []
    author.value = null
    showHot.value = true
    empty.vaule = false
  }
})

function navigateTo(url) {
  Taro.navigateTo({
    url: url
  })
}
const getHostSearch = async () => {
  hotSearch = await get("search/hot")
}
const quickSearch = async (key) => {
  key.value = key
  search(key)
}
function goGroup(id) {
  Taro.redirectTo({
    url: "/pages/group/index?id=" + id
  })
}
 const search = async (key) => {
  if(!key) return
  showHot.value = false
  const result = await get('search/do', {
    key: key
  })
  groupList = result.groupList
  author.value = result.authorRsp
   empty.vaue = groupList.length == 0 && !author.value
}

const searchInput = ref();
function init() {
  getHostSearch()
  searchInput.value.focus()
}

init()


</script>
